<template>
  <div class="main">
    <div class="left">
      <div class="header">
        <span class="title">{{title}}</span>
        <span class="time">时间：{{moment(new Date()).format('YYYY-MM-DD')}}</span>
      </div>
      <!--      图表-->
      <div class="left-content">
        <div id="main3" :style="{width: echartsWidth}"></div>
      </div>
    </div>
    <div class="right">
      <div class="list">
        <div class="card" v-for="(item, index) in dataList" :key="index">
          <div class="title">{{item.title}}</div>
          <div :class="[item.title === '环比' ? (item.num >= 0 ? item.color1 : item.color2) : item.color]">
            <span class="num">{{item.num}}</span>
            <span class="unit">{{item.unit}}  </span>
            <span class="icon iconfont icon-web-icon--copy" v-if="item.title === '环比' && item.num >= 0"></span>
            <span class="icon iconfont icon-down-copy" v-if="item.title === '环比' && item.num < 0"></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import * as echarts from "echarts";
export default {
  name: 'TodayEnergyRight',
  props: [ 'sidebar', 'chartData' ],
  computed: {
    moment() {
      return moment
    },
    echartsWidth() {
      let width = '0px'
      if (this.sidebar.opened) {
        width = '410px'
      }else{
        width = '434px'
      }
      return width
    }
  },
  watch: {
    'sidebar.opened': function() {
      // 先移除之前的事件监听器
      window.removeEventListener('resize', this.handleResize);
      // 绑定新的事件监听器
      window.addEventListener('resize', this.handleResize);
      // 立即调用一次 resize，确保图表适配当前窗口大小
      this.handleResize();
    },
    chartData(newVal) {
      this.initEcharts();
    }
  },
  data(){
    return {
      title:'',
      myChart: null,
      // 当日总用能统计
      dataList: [],
      // 图表配置
      option: {
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          x: 30, //距离左侧距离
          y: 60,//距离顶部距离
          x2: 45, //距离右侧距离
          y2: 5, //距离底部距离
          containLabel: true,
          // right: 38,
        },
        legend: {
          itemWidth: 12, // 图标宽度
          itemHeight: 12, // 图标高度
          // x: 'right', // 图例水平居中
          y: 'top', // 图例垂直居中
          data: ['今日','昨日','前天'],
          right: '40px',
          top: '20px',
          icon: 'circle',
        },
        xAxis: {
          name: '时间',
          type: 'category',
          boundaryGap: false,
          data: []
        },
        yAxis:  {
          name: '单位：kW',
          type: 'value'
        },
        series: [
          {
            name: '今日',
            type: 'line',
            data: [],
            smooth: true,      //true 有弧度 ，false 没弧度（直线）
            symbol: 'circle',   //将小圆点改成实心 不写symbol默认空心
            symbolSize: 5,    //小圆点的大小
            itemStyle: {
              color: '#36bd51'    //小圆点和线的颜色
            },
          },
          {
            name: '昨日',
            type: 'line',
            data: [],
            smooth: true,      //true 有弧度 ，false 没弧度（直线）
            symbol: 'circle',   //将小圆点改成实心 不写symbol默认空心
            symbolSize: 5,    //小圆点的大小
            itemStyle: {
              color: '#37b3d7'    //小圆点和线的颜色
            },
          },
          {
            name: '前天',
            type: 'line',
            data: [],
            smooth: true,      //true 有弧度 ，false 没弧度（直线）
            symbol: 'circle',   //将小圆点改成实心 不写symbol默认空心
            symbolSize: 5,    //小圆点的大小
            itemStyle: {
              color: '#f56c6c'    //小圆点和线的颜色
            },
          },
        ]
      }
    }
  },
  methods: {
    handleResize() {
      if (this.myChart) {
        this.$nextTick(function () {
          this.myChart.resize();
        })
      }
    },
// 初始化图表
    initEcharts() {
      const chartDom = document.getElementById('main3'); // 确保 DOM 容器存在
      this.myChart = echarts.init(chartDom)
      this.title = '';
      this.dataList = [
        {title: '今日', num: 0, unit: 'kW', color: 'c_36bd51'},
        {title: '昨日', num: 0, unit: 'kW',color: 'c_0565f8'},
        {title: '前天', num: 0, unit: 'kW', color: 'c_f56c6c'},
      ];
      if(this.chartData.hourList !== undefined){
        this.option.xAxis.data = this.chartData.hourList;
      }
      this.option.series[0].data = [];
      this.option.series[1].data = [];
      this.option.series[2].data = [];
      if(this.chartData.data !== undefined && this.chartData.data !== null){
        let dd = this.chartData.data;
        this.title = dd.terminalName!=undefined && dd.terminalName ? dd.terminalName : '';
        this.dataList = [
          {title: '今日', num: dd.today.sum, unit: 'kW', color: 'c_36bd51'},
          {title: '昨日', num: dd.before1.sum, unit: 'kW',color: 'c_0565f8'},
          {title: '前天', num: dd.before2.sum, unit: 'kW', color: 'c_f56c6c'},
        ];
        this.option.series[0].data = dd.today.valueList;
        this.option.series[1].data = dd.before1.valueList;
        this.option.series[2].data = dd.before2.valueList;
      }
      this.myChart.setOption(this.option);
    },
  },
  mounted() {
    this.initEcharts();
  }
}
</script>

<style scoped lang="scss">
@import '../../../assets/styles/summarize.scss';
.main {
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-columns: auto 100px;
  grid-template-rows: 1fr;
}
.right{
  height: 270px;
  margin-top: 14px;
  .list{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: auto;
    width: 100%;
    .card{
      height: 80px;
      border-radius: 5px;
      border: 1px solid #ccc;
      padding: 10px 10px;
      margin-bottom: 8px;
      .title{
        font-size: 14px;
        color: #646464;
        line-height: 30px;
      }
      .num, .unit{
        font-size: 16px;
        line-height: 30px;
        font-weight: 550;
      }
      .icon{
        margin-top: 5px;
      }
    }
    .card:last-child{
      margin-bottom: 0;
    }
  }
}
.icon-web-icon--copy,.icon-down-copy{
  font-size: 20px;
}
#main3{
  width: 380px;
  height: 264px;
}
</style>
